<template>
	<div class="box flex-col">
		<div class="header flex m-between s-center" :class="{ small: small }">
			<div class="title">
				<slot name="title">
					<span>{{ title }}</span>
				</slot>
			</div>
			<div class="img" v-if="slots.right">
				<slot name="right"> </slot>
			</div>
		</div>
		<div class="flex-col f1 h0" :class="small ? 'p-5' : 'p-10'">
			<slot></slot>
		</div>
	</div>
</template>

<script setup name="MyBox">
const props = defineProps({
	title: {
		type: String,
		default: ''
	},
	right: {
		type: Boolean,
		default: true
	},
	small: {
		type: Boolean,
		default: false
	}
})
</script>

<style lang="scss" scoped>
.box {
	border: 1px solid rgba(76, 107, 209, 0.5);
	background: rgba(3, 15, 39, 0.4);
	box-sizing: border-box;
	.header {
		padding: 10px;
		box-sizing: border-box;
		background: linear-gradient(90deg, rgba(65, 119, 227, 0.5) 21%, rgba(65, 119, 227, 0.1) 93%);
		.title {
			z-index: 1;
			color: #fff;
			font-size: 16px;
			font-weight: 500;
			position: relative;
			span {
				margin-left: 10px;
			}
			&::before {
				content: '';
				width: 4px;
				height: 12px;
				position: absolute;
				top: 50%;
				background: #4d88fe;
				transform: translateY(-50%);
			}
		}
		img {
			margin-left: 10px;
		}
	}

	.small {
		padding: 5px;

		.title {
			font-size: 14px;
		}
	}
}
</style>
